'use strict';
const path = require('path');
const defaultSettings = require('./src/settings.js');
// const HtmlWebpackPlugin = require('html-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, dir);
}

const name = defaultSettings.title || 'vue Admin Template'; // 页面标题

// 如果您的端口设置为 80，
// 使用管理员权限来执行命令行。
// 例如，Mac：sudo npm run
// 您可以通过以下方法更改端口：
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528; // 开发环境端口

// 所有配置项的解释都可以在 https://cli.vuejs.org/config/ 找到
module.exports = {
  /**
   * 如果您计划在子路径下部署您的站点，
   * 例如 GitHub Pages。如果您计划将站点部署到 https://foo.github.io/bar/，
   * 那么 publicPath 应该设置为 "/bar/"。
   * 在大多数情况下，请使用 '/' !!!
   * 详情：https://cli.vuejs.org/config/#publicpath
   */
  /*   css: {
      loaderOptions: {
        scss: {
          additionalData: `@import "@/styles/index.scss";`
        }
      }
    }, */
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    // overlay: {
    //   warnings: false,
    //   errors: true
    // },
    // before:require('./mock/mock-server.js'),
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost:8081',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  },
  configureWebpack: {
    // 在 webpack 的 name 字段中提供应用的标题，以便
    // 它可以在 index.html 中访问，以注入正确的标题。
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      },
      fallback: {
        "path": require.resolve("path-browserify")
      }
    },
    plugins: [
      // new HtmlWebpackPlugin({
      //   rel: 'preload',
      //   fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      //   include: 'initial'
      // })
    ],
    module: {
      rules: [
        {
          test: /\.md$/,
          use: 'markdown-loader'
        }
      ]
    },
  },
  chainWebpack(config) {
    // 当页面很多时，会导致太多无意义的请求
    config.plugins.delete('prefetch');

    // 设置 svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end();
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end();

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              // `runtime` 必须与 runtimeChunk 名称相同。默认为 `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end();
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // 只打包最初依赖的第三方包
                },
                elementUI: {
                  name: 'chunk-elementUI', // 将 elementUI 拆分为单个包
                  priority: 20, // 权重必须大于 libs 和 app，否则将打包到 libs 或 app 中
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 适应 cnpm
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // 可自定义规则
                  minChunks: 3, // 最小公共数量
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            });
          // https://webpack.js.org/configuration/optimization/#optimizationruntimechunk
          config.optimization.runtimeChunk('single');
        }
      );
  }
};
